<script>
	export default{
		name:'Tab',
		data(){
			return{
			
			}
		},
		props:{
			label:{
				type:[String,Number],
				default:'tab'
			},
			index:{
				type:[String,Number],
				default:''
			}
		},
		mounted(){
			this.$parent.panes.push(this)
		},
		methods:{
			handlerClick(){
				this.$parent.onChange(this.index)
			}
		},
		computed:{
			active(){
				return this.$parent.value == this.index
			}
		},
		render(){
			const className = {
				tab:true,
				active:this.active
			}
		return(
				<li onClick={ this.handlerClick } class={ className }>
					{ this.label }
				</li>
			)
		}
	}
</script>
<style lang="less" scoped>
.tab{
	height: 50px;
  list-style:none;
  line-height:50px;
  margin-right:30px;
  position:relative;
  bottom:-2px;
  cursor:pointer;
  font-size: 18px;
}
.tab.active{
  background-color: #eee;
}
.icon-kechengbiao:before{
	display: inline-block;
	margin-right: 5px;
	color:#fb9849;
}
.tab.last-child{
  margin-right:0;
}
</style>